<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2025-07-02 21:36:54
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2025-07-03 22:59:02
 * @FilePath: /book-manage-angular/src/app/pages/login/login.component.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<div class="login-container">
  <div class="login-bg">
    <div class="bg-overlay"></div>
  </div>

  <div class="login-content">
    <div class="login-card">
      <div class="login-header">
        <div class="login-icon">
          <!-- Using Ant Design's book icon -->
          <i nz-icon nzType="book" nzTheme="outline"></i>
        </div>
        <h1 class="heading">图书馆管理系统</h1>
        <p>智慧管理，高效服务</p>
      </div>

      <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="handleLogin()">
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名">
            <nz-input-group nzPrefixIcon="user">
              <input type="text" nz-input formControlName="username" placeholder="请输入用户名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入密码">
            <nz-input-group nzPrefixIcon="lock">
              <input type="password" nz-input formControlName="password" placeholder="请输入密码" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <button
            nz-button
            nzType="primary"
            nzSize="large"
            class="login-button"
            [nzLoading]="loading"

          >
            <span *ngIf="!loading">立即登录</span>
            <span *ngIf="loading">登录中...</span>
          </button>
        </nz-form-item>
      </form>

      <div class="login-tips">
        <nz-alert
          nzType="info"
          nzMessage="演示账号"
          [nzShowIcon]="true"
          [nzDescription]="alertDescription"
        ></nz-alert>
        <ng-template #alertDescription>
          <p><strong>管理员：</strong>admin / 123456</p>
          <p><strong>用户：</strong>user / 123456</p>
        </ng-template>
      </div>

      <div class="login-footer">
        <div class="system-info">
          <span class="info-item">
            <i nz-icon nzType="code" nzTheme="outline"></i>
            Angular
          </span>
          <span class="info-item">
            <i nz-icon nzType="ant-design" nzTheme="outline"></i>
            NG-ZORRO
          </span>
          <span class="info-item">
            <i nz-icon nzType="star" nzTheme="outline"></i>
            现代化管理
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
